<template>
  <div class="goods-sku">
    <dl v-for='(item, i) in specs' :key='i'>
      <dt>{{item.name}}</dt>
      <dd>
        <template v-for='(tag, n) in item.values' :key='n'>
          <img :class='{selected: tag.selected,disabled:tag.disabled}' v-if='tag.picture' :src="tag.picture" alt="" @click='toggle(tag, item.values)'>
          <span :class='{selected: tag.selected,disabled:tag.disabled}' v-else @click='toggle(tag, item.values)'>{{tag.name}}</span>
        </template>
      </dd>
    </dl>
  </div>
</template>
<script>
import powerSet from '@/vendor/power-set.js'
const spliter = '#'
// 生成路径字典
const usePathMap = (skus) => {
  // 把集合转换为字典
  const pathMap = {} // 字典
  skus.forEach(sku => {
    // 过滤掉为0的sku
    if (sku.inventory === 0) return
    // 把sku中的数据规格转换为普通数组
    // attrs =[蓝色,中国,10cm]
    const attrs = sku.specs.map(item => item.valueName)
    // 计算集合的笛卡尔集
    const subsets = powerSet(attrs)

    subsets.forEach(item => {
      // 排除空集
      if (item.length === 0) return
      // 把规格的组合拼接为路径字典的key
      const pathKey = item.join(spliter)
      // 把结果添加到路径字典中
      if (pathMap[pathKey]) {
        // 已经存在该key
        pathMap[pathKey].push(sku.id)
      } else {
        // 尚未存在，添加一个新的
        pathMap[pathKey] = [sku.id]
      }
    })
    console.log(subsets)
  })
  return pathMap
}
// 获取选中的所有的规格的值
const getSelectedValues = (specs) => {
  // result =[蓝色 ，undefinde,10cm]
  const result = []
  specs.forEach((item, index) => {
    // 获取当前选中规格的标签
    const tag = item.values.find(tag => tag.selected)
    if (tag) {
      // 有选中的
      result[index] = tag.name
    } else {
      // 没有选中
      result[index] = undefined
    }
  })
  return result
}

// 更新每一个规格选项的禁用状态
const updateDisabledStatus = (specs, pathMap) => {
  specs.forEach((item, index) => {
    // 获取选择得值
    const result = getSelectedValues(specs)
    item.values.forEach(tag => {
      if (tag.selected) {
        // 选择状态不需要处理
        return
      } else {
        result[index] = tag.name
        // 没有选中,就把当前标签的名称
      }
      // 把选中的值拼接为字符串 就是字典的key
      // 过滤掉undefined值，基于剩余的值组合一个路径
      let currentPath = result.filter(item => item)
      if (currentPath.length > 0) {
        // 拼接路径字符串 currentPath = 黑色★10cm
        currentPath = currentPath.join(spliter)
        // 判断当前的路径是否在路径字典中(如果在字典中没有找到该路径，证明当前的标签应该禁用)
        tag.disabled = !pathMap[currentPath]
      }
    })
  })
}
export default {
  name: 'GoodsSku',
  props: {
    // 商品的规格参数
    specs: {
      type: Array,
      default: () => []
    },
    skus: {
      type: Array,
      default: () => []
    }
  },
  setup (props) {
    // 把每一个单独的选项判断一遍,并处理禁用状态

    const pathMap = usePathMap(props.skus)
    updateDisabledStatus(props.specs, pathMap)
    // console.log(pathMap)
    // const ret = getSelectedValues(props.specs)
    // console.log(ret)
    // 控制标签的选中和反选(保证仅仅可以选中一个标签)
    const toggle = (tag, list) => {
      if (tag.disabled) return
      // 处理当前点击的标签是否选中
      tag.selected = !tag.selected
      // 处理点击当前标签之外的其他标签的情况
      list.forEach(item => {
        if (item.name !== tag.name) {
          // 其他标签，都编程不选中的状态
          item.selected = false
        }
      })
      // 触发更新所有规格选项禁用状态的规格
      updateDisabledStatus(props.specs, pathMap)
    }
    return { toggle }
  }
}
</script>
<style scoped lang="less">
.sku-state-mixin () {
  border: 1px solid #e4e4e4;
  margin-right: 10px;
  cursor: pointer;
  &.selected {
    border-color: @xtxColor;
  }
  &.disabled {
    opacity: 0.6;
    border-style: dashed;
    cursor: not-allowed;
  }
}
.goods-sku {
  padding-left: 10px;
  padding-top: 20px;
  dl {
    display: flex;
    padding-bottom: 20px;
    align-items: center;
    dt {
      width: 50px;
      color: #999;
    }
    dd {
      flex: 1;
      color: #666;
      > img {
        width: 50px;
        height: 50px;
        .sku-state-mixin ();
      }
      > span {
        display: inline-block;
        height: 30px;
        line-height: 28px;
        padding: 0 20px;
        .sku-state-mixin ();
      }
    }
  }
}
</style>
